<template>
	<view class="content">
		<view class="title">
			<text class="title-text">您的取消理由是？</text>
			<text class="title-text1">请告诉我们，我们将更加完善</text>
		</view>
		<view v-for="(item,index) in items" :key="index">
			<view class="item" @click="item_index!==index?item_index=index:item_index=-1">
				<text class="item-text">{{item}}</text>
				<image :class="item_index==index?'item-imag1':'item-imag'" src="../../static/icon3/jiantou.png" mode="aspectFill"></image>
			</view>
			<view  @click="item_it_index=items_index,dictLabel=items.dictLabel" v-for="(items,items_index) in items_it" :key="items_index" class="item_it" v-if="item_index==index&&items.dictSort==(index+1)">
				<view class="item_it_str">
					<text class="item_it_str_text">{{'·'+items.dictLabel}}</text>
					<image v-show="item_it_index==items_index" class="item_it_str_selected" src="../../static/icon1/hdg.png" mode="aspectFill"></image>
					<view v-show="item_it_index!=items_index" class="item_it_str_select"></view>
				</view>
			</view>
		</view>
		<view class="butoon">
			<view v-if="!isSelected" class="butoon1">取消</view>
			<view v-if="isSelected" @click="selectItem()" class="butoon2">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// items: ['系统问题', '雇主问题', '自己问题', '其他问题'],
				// items_it: [
				// 	['定位地址不准确'],
				// 	['真实工价和发布工价有偏差', '真实工作内容与发布工作内容有偏差', '无法联系到雇主', '雇主实际用工人数已满'],
				// 	['临时有事情处理', '更换其他的工作', '距离问题放弃任务', '找不到工作地点'],
				// 	['其他原因']
				// ],
				items:[],
				items_it:[],
				item_index:-1,
				item_it_index:-1,
				isSelected:false,
				dictLabel:'',
				orderId:0,
			}
		},
		methods:{
			//selectItem button点击事件
			async selectItem(){
				let res = await this.$fetch(this.$api.order_cancel_id,{
					'type':this.item_index+1,
					'resion': this.dictLabel,
					'orderId':this.orderId
				}, 'POST')
				
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				console.log(333);
				let pages = getCurrentPages(); //获取页面栈
				// console.log(pages,"获取页面栈");
				if(pages[pages.length-2].route=="pages/order-received/order-received"){
					uni.navigateBack({
						delta:2
					})
				}else {
					uni.navigateBack({
						delta:1
					})
				}
				
			},
			// cancel_list 获取取消愿意列表
			async get_cancel_list(){
				let res = await this.$fetch(this.$api.cancel_list, {}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				res.data.forEach(v=>{
					if(!this.items.includes(v.remark)){
						this.$set(this.items,parseInt(v.dictSort) -1,v.remark)
					}
				})
				this.items_it=res.data
				// console.log(this.items,this.items_it)
			},
		},
		onLoad(value) {
			this.orderId=value.orderId
			this.get_cancel_list()
		},
		onShow() {
			this.get_cancel_list()
		},
		updated() {
			this.item_it_index!=-1&&this.item_index!=-1?this.isSelected=true:this.isSelected=false
		},
		// onBackPress() {
		// 	let pages = getCurrentPages(); //获取页面栈
		// 	console.log(pages);
		// 	if(pages[pages.length-2].route=="pages/order-received/order-received"){
		// 		uni.navigateBack({
		// 			delta:2
		// 		})
		// 		return false
		// 	}else {
		// 		return true
		// 	}
		// }
	}
</script>

<style lang="less" scoped>
	.title {
		width: 750rpx;
		height: 156rpx;
		background-color: #F2F2F2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.title-text {
		font-size: 36rpx;
		font-weight: 500;
		color: #402110;
		line-height: 36rpx;
		margin-bottom: 20rpx;
	}

	.title-text1 {
		font-size: 24rpx;
		font-weight: 500;
		color: #402110;
		line-height: 24rpx;
	}

	.item {
		width: 750rpx;
		height: 89rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.item-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #402110;
		line-height: 32rpx;
		margin-left: 30rpx;
	}

	.item-imag {
		width: 36rpx;
		height: 36rpx;
		margin-right: 30rpx;
		transform: rotate(180deg);
	}

	.item-imag1 {
		width: 36rpx;
		height: 36rpx;
		margin-right: 30rpx;
	}

	.item_it {
		width: 750rpx;
		height: 75rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		
	}
	.butoon {
		width: 750rpx;
		height: 88rpx;
		position: fixed;
		bottom: 68rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.butoon1 {
		width: 690rpx;
		height: 88rpx;
		background: #ABABAB;
		border-radius: 12rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.butoon2 {
		width: 690rpx;
		height: 88rpx;
		background: #FCC928;
		border-radius: 12rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.item_it_str {
		width: 690rpx;
		height: 75rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.item_it_str_text {
		font-size: 28rpx;
		font-weight: 500;
		color: #787878;
		line-height: 28rpx;
	}
	.item_it_str_select {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #AFAFAF;
		border-radius: 50%;
	}
	.item_it_str_selected {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
	}
</style>
